<template>
  <div>
    <head-container></head-container>
    <section class="comment_main">
      <h2>
        <router-link tag="span" to="/">首页</router-link>
        <router-link tag="span" to="/listAction">> 我的订单</router-link>
        <span>>提交评价</span>
      </h2>
      <div class="comment_wrap">
        <div class="comment_item" v-for="(item,index) in list" :key="index">
          <div class="goods_info">
            <img :src="item.image" :alt="item.a">
            <span>{{item.product||item.course}}</span>
          </div>
          <div class="comment_info">
            <header>
              <span class="title">写评价:</span>
              <el-radio-group v-model="radio[index]">
                <el-radio label="0">好评</el-radio>
                <el-radio label="1">中评</el-radio>
                <el-radio label="2">差评</el-radio>
              </el-radio-group>
            </header>
            <el-input class="content"
              :rows= 5
              type="textarea"
              resize="none"
              placeholder="请输入内容"
              @change="blur($event,index)"
              :v-model="content[index]">
            </el-input>
          </div>
        </div>
        <div class="pull_btn">
          <span @click="pushComment">提交</span>
        </div>
      </div>
    </section>
    <foot-container></foot-container>
  </div>
</template>
<script>
import headContainer from '../components/headContainer'
import footContainer from '../components/footContainer'
export default {
  data(){
    return{
      oid:this.$route.params.oid,
      list:[],
      content:[],
      radio:[],
    }
  },
  components:{
    headContainer,
    footContainer
  },
  beforeMount(){
    if (!this.oid) {
      this.$router.push({path:'listAction'})
    }else{
      this.GLOBAL.tokenRequest({
        method:'post',
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'orders/find',
        data:{
          oid:this.oid
        }
      }).then(({data:data})=>{
        for (let i = 0; i < data.length; i++) {
          this.radio.push('0')
          this.content.push('')
        }
        this.list = data;
      })
    }
  },
  mounted(){
    
  },
  methods:{
    blur(text,d){
      this.content[d]= text ;
    },
    pushComment(){
      this.GLOBAL.tokenRequest({
        method:'post',
        baseURL:this.GLOBAL.RNTY_SHOP_MALL_URL,
        url:'comments/publish',
        data:{
          oid:this.oid,
          comment:JSON.stringify(this.list.map((item,i)=>{
                return{
                  content:this.content[i],
                  product_id:item.product_id,
                  course_id:item.course_id,
                  type:this.radio[i]
                }
            }))
        }
      }).then(({data:data})=>{
        this.$router.push({path:'/listAction'})
      })
    }
  }
}
</script>
<style scoped>
.comment_main{
  width:1200px;
  min-height: 630px;
  padding-top:50px;
  margin: 0 auto;
}
h2 span{
  font: 14px/70px "微软雅黑";
  color:#999;
  cursor: pointer;
}
.comment_wrap{
  width:1200px;
  border:1px solid #b1b1b1;
}
.goods_info{
  width:300px;
}
.goods_info img{
  width:120px;
  height:100px;
}
.comment_item{
  padding:10px 25px;
  display: flex;
}
.comment_info{
  width:535px;
}
.title{
  width:90px;
  height:30px;
  padding:5px 10px;
  font-family: "微软雅黑";
  background-color: #e0eefc;
}
.content{
 border:10px solid #e0eefc;
}
.pull_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin:15px 0;
}
.pull_btn span{
  width:90px;
  height:24px;
  font:14px/24px "微软雅黑";
  background-color: #5cb0ff;
  color:#fff;
  border-radius: 5px;
  cursor: pointer;
}
</style>

